/**
 * HUD界面 - 显示玩家血量、饥饿值等信息
 */
export class HUD {
  private hudElement!: HTMLElement;
  private healthBar!: HTMLElement;
  private hungerBar!: HTMLElement;
  private crosshair!: HTMLElement;

  constructor() {
    this.createHUD();
  }

  private createHUD(): void {
    // 创建主HUD容器
    this.hudElement = document.createElement('div');
    this.hudElement.id = 'hud';
    this.hudElement.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1000;
      font-family: 'Minecraft', monospace;
    `;

    // 创建准星
    this.createCrosshair();

    // 创建血量条
    this.createHealthBar();

    // 创建饥饿值条
    this.createHungerBar();

    // 添加到页面
    document.body.appendChild(this.hudElement);
  }

  private createCrosshair(): void {
    this.crosshair = document.createElement('div');
    this.crosshair.style.cssText = `
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      transform: translate(-50%, -50%);
      pointer-events: none;
    `;

    // 创建十字准星
    const horizontal = document.createElement('div');
    horizontal.style.cssText = `
      position: absolute;
      top: 50%;
      left: 25%;
      width: 50%;
      height: 2px;
      background-color: rgba(255, 255, 255, 0.8);
      transform: translateY(-50%);
    `;

    const vertical = document.createElement('div');
    vertical.style.cssText = `
      position: absolute;
      top: 25%;
      left: 50%;
      width: 2px;
      height: 50%;
      background-color: rgba(255, 255, 255, 0.8);
      transform: translateX(-50%);
    `;

    this.crosshair.appendChild(horizontal);
    this.crosshair.appendChild(vertical);
    this.hudElement.appendChild(this.crosshair);
  }

  private createHealthBar(): void {
    const healthContainer = document.createElement('div');
    healthContainer.style.cssText = `
      position: absolute;
      bottom: 60px;
      left: 20px;
      display: flex;
      gap: 2px;
    `;

    this.healthBar = document.createElement('div');
    this.healthBar.style.cssText = `
      display: flex;
      gap: 2px;
    `;

    // 创建20个心形图标（满血）
    for (let i = 0; i < 10; i++) {
      const heart = document.createElement('div');
      heart.style.cssText = `
        width: 18px;
        height: 18px;
        background-color: #ff0000;
        position: relative;
        transform: rotate(-45deg);
        margin: 2px;
      `;

      // 创建心形的两个圆角
      const leftTop = document.createElement('div');
      leftTop.style.cssText = `
        position: absolute;
        width: 9px;
        height: 13px;
        background-color: #ff0000;
        border-radius: 9px 9px 0 0;
        top: -6px;
        left: 0;
      `;

      const rightTop = document.createElement('div');
      rightTop.style.cssText = `
        position: absolute;
        width: 9px;
        height: 13px;
        background-color: #ff0000;
        border-radius: 9px 9px 0 0;
        top: -6px;
        right: 0;
      `;

      heart.appendChild(leftTop);
      heart.appendChild(rightTop);
      this.healthBar.appendChild(heart);
    }

    healthContainer.appendChild(this.healthBar);
    this.hudElement.appendChild(healthContainer);
  }

  private createHungerBar(): void {
    const hungerContainer = document.createElement('div');
    hungerContainer.style.cssText = `
      position: absolute;
      bottom: 60px;
      right: 20px;
      display: flex;
      gap: 2px;
    `;

    this.hungerBar = document.createElement('div');
    this.hungerBar.style.cssText = `
      display: flex;
      gap: 2px;
    `;

    // 创建10个饥饿值图标
    for (let i = 0; i < 10; i++) {
      const hunger = document.createElement('div');
      hunger.style.cssText = `
        width: 18px;
        height: 18px;
        background-color: #8B4513;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        position: relative;
        margin: 2px;
      `;

      // 添加鸡腿的"骨头"部分
      const bone = document.createElement('div');
      bone.style.cssText = `
        position: absolute;
        width: 4px;
        height: 8px;
        background-color: #F5DEB3;
        bottom: -2px;
        right: 2px;
        border-radius: 2px;
      `;

      hunger.appendChild(bone);
      this.hungerBar.appendChild(hunger);
    }

    hungerContainer.appendChild(this.hungerBar);
    this.hudElement.appendChild(hungerContainer);
  }

  public updateHealth(health: number, maxHealth: number): void {
    const hearts = this.healthBar.children;
    const heartsToShow = Math.ceil(maxHealth / 2); // 每个心代表2点血量
    
    for (let i = 0; i < hearts.length; i++) {
      const heart = hearts[i] as HTMLElement;
      if (i < heartsToShow) {
        const heartValue = (i + 1) * 2;
        if (health >= heartValue) {
          // 满心
          heart.style.opacity = '1';
          heart.style.filter = 'none';
        } else if (health >= heartValue - 1) {
          // 半心
          heart.style.opacity = '1';
          heart.style.filter = 'brightness(0.6)';
        } else {
          // 空心
          heart.style.opacity = '0.3';
          heart.style.filter = 'grayscale(1)';
        }
        heart.style.display = 'block';
      } else {
        heart.style.display = 'none';
      }
    }
  }

  public updateHunger(hunger: number, maxHunger: number): void {
    const hungerIcons = this.hungerBar.children;
    const iconsToShow = Math.ceil(maxHunger / 2); // 每个图标代表2点饥饿值
    
    for (let i = 0; i < hungerIcons.length; i++) {
      const icon = hungerIcons[i] as HTMLElement;
      if (i < iconsToShow) {
        const iconValue = (i + 1) * 2;
        if (hunger >= iconValue) {
          // 满饥饿值
          icon.style.opacity = '1';
          icon.style.filter = 'none';
        } else if (hunger >= iconValue - 1) {
          // 半饥饿值
          icon.style.opacity = '1';
          icon.style.filter = 'brightness(0.6)';
        } else {
          // 空饥饿值
          icon.style.opacity = '0.3';
          icon.style.filter = 'grayscale(1)';
        }
        icon.style.display = 'block';
      } else {
        icon.style.display = 'none';
      }
    }
  }

  public setCrosshairVisible(visible: boolean): void {
    this.crosshair.style.display = visible ? 'block' : 'none';
  }

  public setVisible(visible: boolean): void {
    this.hudElement.style.display = visible ? 'block' : 'none';
  }

  public dispose(): void {
    if (this.hudElement && this.hudElement.parentNode) {
      this.hudElement.parentNode.removeChild(this.hudElement);
    }
  }
}